<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
import {listFamTree} from "@/api/system/famTree";
require("echarts/theme/macarons"); // echarts theme
// import resize from './mixins/resize'

const animationDuration = 6000;

export default {
  //   mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "500px",
    },
    // chartData: {
    //   type: Object,
    //   required: true
    // }
  },
  data() {
    return {
      chart: null,
      memberOptions: undefined,
      chartslist: listFamTree.data(),
    };
  },
  mounted() {
    setTimeout(() => {
      this.initChart();
    }, 400);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  created() {
    this.getMemberTreeselect();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    getMemberTreeselect() {
      listFamTree().then(response => {
        this.chartsdata = response.data;
        console.log(this.chartsdata);
      });
    },
    setOptions({
                 seriesData,
                 chartTitleText,
                 chartTitleColor,
                 chartTitleFontSize,
               } = {}) {
      this.chart.setOption({
        // title: {
        //   text: "手机品牌",
        //   subtext: "子标题",
        //   textStyle: {
        //     color: chartTitleColor || "#333", // 文字颜色
        //     fontSize: chartTitleFontSize || 14, // 文字大小
        //   },
        // },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        series: [
          {
            type: "tree",
            orient: "vertical",
            top: "10%",
            left: "8%",
            bottom: "22%",
            right: "20%",
            // symbol:"image:E:\\study\\Source\\FamilyGender\\Picture\\head.png",
            symbolSize: [30, 30],
            data: this.chartsdata,

            edgeShape: "polyline", //折线
            lineStyle: {
              width: 1,
              // color: "#000",
              // type: "solid", // 'curve'|'broken'|'solid'|'dotted'|'dashed'
            },
            label: {
              //每个节点的label
              backgroundColor: "#F0F2F5",
              position: "left",
              verticalAlign: "middle",
              align: "right",
            },

          },
        ],
      });
    },
  },
};
</script>

